<!--店铺管理-->
<script setup lang="ts">
  import {AxiosPromise} from "axios";

  defineOptions({
    name: "AccountProject",
    inheritAttrs: false,
  });

  import lodash from 'lodash-es'
  import {
    getSubjectsList, importSubject
  } from "@/api/subjects";

  import { AccountingProjectQuery, AccountingProjectForm, AccessoryForm } from "@/api/accountingProject/types";
  import { PlatformForm } from "@/api/platform/types";
  import { SubjectsForm, SubjectsQuery } from "@/api/subjects/types";
  import {getAccountingProjectPage, saveAccountingProject, getAccountingProjectForm, deleteAccountingProject, exportAccountingProject, importAccountProject} from "@/api/accountingProject";
  import {findAll} from "@/api/accessory";
  import {getPlatformList} from "@/api/platform";
  import {ElLoading, UploadFile} from "element-plus";
	import { getDictOptions } from "@/api/dict";
	import { getByStoreKey } from "@/api/store";

  const queryFormRef = ref(ElForm);
  const dataFormRef = ref(ElForm);

  const loading = ref(false);
  const ids = ref<number[]>([]);
  const total = ref(0);

  const queryParams = reactive<AccountingProjectQuery>({
    pageNum: 1,
    pageSize: 20,
  });

  const subjectQueryParams = reactive<SubjectsQuery>({
	  pageNum: 1,
	  pageSize: 50,
  });

  const projectList = ref<[]>();
  const storeList = ref<[]>([]);
  const platformList = ref<PlatformForm[]>();
  const subjectList = ref<SubjectsForm[]>();
  const otherSubjectList = ref<SubjectsForm[]>();
  // 发生方辅助项
  const accessoryMap = reactive<AccessoryForm>({
    accessoryValue1: '',
    accessoryValue2: '',
    accessoryValue3: '',
    accessoryValue4: '',
    accessoryValue5: '',
    accessoryValue6: '',
    accessoryValue7: '',
    accessoryValue8: '',
    accessoryValue9: '',
  })
  // 对方辅助项
  const otherAccessoryMap = reactive<AccessoryForm>({
    accessoryValue1: '',
    accessoryValue2: '',
    accessoryValue3: '',
    accessoryValue4: '',
    accessoryValue5: '',
    accessoryValue6: '',
    accessoryValue7: '',
    accessoryValue8: '',
    accessoryValue9: '',
  })

  const dialog = reactive<DialogOption>({
    visible: false,
  });

  const formData = reactive<any>({});
  const importDialog = reactive<DialogOption>({
    title: "记账项目导入",
    visible: false,
  });

  const excelFile = ref<File>();
  const excelFilelist = ref<File[]>([]);
  const importMsg = ref([])
  const activeTab = ref()
  const storeTab = ref('')
  const resultDialog = reactive<DialogOption>({
    title: "导入错误信息",
    visible: false,
  });
  const selfAccessoryNames = ref<[]>([])
  const otherAccessoryNames = ref<[]>([])
  const options = ref<[]>([])

  const rules = reactive({
    billSystemPlatformCode: [{ required: true, message: "请选择对账系统平台", trigger: "change" }],
    accountingProjectName: [{ required: true, message: "请输入电商平台账单项目", trigger: "blur" }],
    // lastCode: [{ required: true, message: "请选择末级科目", trigger: "change" }],
    // lastCode: [{ required: true, message: "请输入末级科目编码", trigger: "change" }],
    // otherLastCode: [{ required: true, message: "请输入末级科目编码", trigger: "change" }],
    // accountingProject: [{ required: true, message: "请输入记账项目", trigger: "blur" }],
    // apportionment: [{ required: true, message: "请选择是否分摊", trigger: "blur" }],
    // invoice: [{ required: true, message: "请选择票前票后", trigger: "blur" }],
    // audit: [{ required: true, message: "请选择稽核标识", trigger: "blur" }],
    // accounting: [{ required: true, message: "请选择是否参与记账", trigger: "blur" }],
    // carrier: [{ required: true, message: "请输入供应商名称", trigger: "blur" }],
    // borrowing: [{ required: true, message: "请选择借贷方向", trigger: "blur" }],
    // otherBorrowing: [{ required: true, message: "请选择借贷方向", trigger: "blur" }],
    // rate: [{ required: true, message: "请选择借贷方向", trigger: "blur" }],
  });

  /**
   * 查询
   */
  function handleQuery() {
    loading.value = true;
    getAccountingProjectPage(queryParams)
            .then(({ data }) => {
              projectList.value = data.list;
              total.value = data.total;
            })
            .finally(() => {
              loading.value = false;
            });
  }

  /**
   * 重置查询
   */
  function resetQuery() {
    queryFormRef.value.resetFields();
    queryParams.pageNum = 1;
    handleQuery();
  }

  /**
   * 行checkbox change事件
   */
  function handleSelectionChange(selection: any) {
    ids.value = selection.map((item: any) => item.id);
  }

  /**
   * 字典类型表单提交
   */
  function handleSubmit() {
		console.info(formData)
    dataFormRef.value.validate((isValid: boolean) => {
      if (isValid) {
        loading.value = false;
        // formData.accessory = {}
        // formData.otherAccessory = {}
        // for (const key of Object.keys(accessoryMap)) {
        //   if (key.includes('Name')) {
        //     const column = key.replaceAll('Name', 'Value')
        //     if (Object.keys(accessoryMap).includes(column) && lodash.get(accessoryMap, column) !== '') {
        //       formData.accessory[lodash.get(accessoryMap, key)] = lodash.get(accessoryMap, column)
        //     }
        //     if (Object.keys(accessoryMap).includes(column) && lodash.get(otherAccessoryMap, column) !== '') {
        //       formData.otherAccessory[lodash.get(accessoryMap, key)] = lodash.get(otherAccessoryMap, column)
        //     }
        //   }
        // }

        saveAccountingProject(formData)
                .then(() => {
                  ElMessage.success("保存成功");
                  closeDialog();
                  handleQuery();
                })
                .finally(() => (loading.value = false));
      }
    });
  }

  /**
   * 打开字典类型表单弹窗
   *
   * @param dicTypeId 字典类型ID
   */
  async function openDialog(id?: number) {
		getDictOptions('fundingProjectCategory').then((response) => {
			options.value = response.data;
		});
    await getAllPlatformList()
    await getSubjectsListApi('')
	  await getOtherSubjectsListApi('')
    await getAccessoryList()
		storeList.value = []
    activeTab.value = 'self'
    dialog.visible = true;
    if (id) {
      dialog.title = "修改记账项目";
      getAccountingProjectForm(id).then(({ data }) => {
        Object.assign(formData, data);
				let platform = lodash.find(platformList.value, (item: any) => item.reconciliationSystemCode === formData.billSystemPlatformCode)
				if (platform !== undefined) {
					getByStoreKey(platform.platformKey).then((response) => {
						storeList.value = response.data
						if (lodash.size(storeList.value) > 0) {
							storeTab.value = storeList.value[0].commercePlatformStoreName
						}
					})
				}
				initData()
        // changeLastCode(formData.lastCode)
				if (lodash.size(formData.fundingProjects) === 0) {
					for (let option of options.value) {
						formData.fundingProjects[option.label] = ''
					}
				}
			});
    } else {
      dialog.title = "新增记账项目";
			formData.fundingProjects = {}
			// 初始化资金项目类别
			for (let option of options.value) {
				formData.fundingProjects[option.label] = ''
			}
    }
  }

	function getStoreListByStoreKey(){
		let platform = lodash.find(platformList.value, (item: any) => item.reconciliationSystemCode === formData.billSystemPlatformCode)
		if (platform !== undefined) {
			selfAccessoryNames.value = []
			formData.accessory = {}
			otherAccessoryNames.value = []
			formData.otherAccessory = {}
			getByStoreKey(platform.platformKey).then((response) => {
				storeList.value = response.data
				if (lodash.size(storeList.value) > 0) {
					storeTab.value = storeList.value[0].commercePlatformStoreName
				}
				initAccessory()
				initOtherAccessory()
			})
		}
	}

	function initAccessory() {
		const filterSubject = lodash.filter(subjectList.value, ['lastCode', formData.lastCode])
		if (filterSubject.length > 0) {
			selfAccessoryNames.value = filterSubject[0].accessoryNames.split(',')
			selfAccessoryNames.value = lodash.filter(selfAccessoryNames.value, (item: any) => lodash.size(item) > 0)
			if (storeList.value.length > 0 && selfAccessoryNames.value.length > 0) {
				for (let store of storeList.value) {
					let item = {}
					for (let accessoryName of selfAccessoryNames.value) {
						item[accessoryName] = ''
					}
					formData.accessory[store.commercePlatformStoreName] = item
				}
			}
		}
	}

	function initOtherAccessory() {
		const filterSubject = lodash.filter(subjectList.value, ['lastCode', formData.otherLastCode])
		if (filterSubject.length > 0) {
			otherAccessoryNames.value = filterSubject[0].accessoryNames.split(',')
			otherAccessoryNames.value = lodash.filter(otherAccessoryNames.value, (item: any) => lodash.size(item) > 0)
			if (storeList.value.length > 0 && otherAccessoryNames.value.length > 0) {
				for (let store of storeList.value) {
					let item = {}
					for (let accessoryName of otherAccessoryNames.value) {
						item[accessoryName] = ''
					}
					formData.otherAccessory[store.commercePlatformStoreName] = item
				}
			}
		}
	}

  /**
   * 关闭弹窗
   */
  function closeDialog() {
    dialog.visible = false;
    resetForm();
  }

  /**
   * 重置表单
   */
  function resetForm() {
    dataFormRef.value.resetFields();
    dataFormRef.value.clearValidate();
    formData.id = undefined;
    // 置空发生方辅助项数据
    accessoryMap.accessoryValue1 = ''
    accessoryMap.accessoryValue2 = ''
    accessoryMap.accessoryValue3 = ''
    accessoryMap.accessoryValue4 = ''
    accessoryMap.accessoryValue5 = ''
    accessoryMap.accessoryValue6 = ''
    accessoryMap.accessoryValue7 = ''
    accessoryMap.accessoryValue8 = ''
    accessoryMap.accessoryValue9 = ''
    // 置空对方辅助项数据
    otherAccessoryMap.accessoryValue1 = ''
    otherAccessoryMap.accessoryValue2 = ''
    otherAccessoryMap.accessoryValue3 = ''
    otherAccessoryMap.accessoryValue4 = ''
    otherAccessoryMap.accessoryValue5 = ''
    otherAccessoryMap.accessoryValue6 = ''
    otherAccessoryMap.accessoryValue7 = ''
    otherAccessoryMap.accessoryValue8 = ''
    otherAccessoryMap.accessoryValue9 = ''
		// 清空数组
	  selfAccessoryNames.value = []
	  otherAccessoryNames.value = []

  }

  /**
   * 删除事件
   */
  function handleDelete(dictTypeId?: number) {
    const dictTypeIds = [dictTypeId || ids.value].join(",");
    if (!dictTypeIds) {
      ElMessage.warning("请勾选删除项");
      return;
    }

    ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }).then(() => {
      deleteAccountingProject(dictTypeIds).then(() => {
        ElMessage.success("删除成功");
        resetQuery();
      });
    });
  }

  /**
   * 获取平台列表
   *
   */
  async function getAllPlatformList() {
    getPlatformList().then((response) => {
      platformList.value = response.data;
    });
  }

  /**
   * 获取科目列表
   */
  async function getSubjectsListApi(keyword?: string){
	  subjectQueryParams.keywords = keyword
    getSubjectsList(subjectQueryParams).then((response) => {
      subjectList.value = response.data;
    });
  }

  /**
   * 获取对方科目列表
   */
  async function getOtherSubjectsListApi(keyword?: string){
	  subjectQueryParams.keywords = keyword
	  getSubjectsList(subjectQueryParams).then((response) => {
		  otherSubjectList.value = response.data;
	  });
  }

  /**
   * 获取辅助项列表
   */
  async function getAccessoryList(){
    findAll().then((response) => {
      if (response.data !== undefined && response.data !== null && response.data.length > 0) {
        Object.assign(accessoryMap, lodash.head(response.data));
        Object.assign(otherAccessoryMap, lodash.head(response.data));
      }
    });
  }

  const dictDataDialog = reactive<DialogOption>({
    visible: false,
  });

	function initData() {
		let filterSubject = lodash.filter(subjectList.value, ['lastCode', formData.lastCode])
		if (filterSubject.length > 0) {
			// 过滤发生方辅助项
			selfAccessoryNames.value = filterSubject[0].accessoryNames.split(',')
			selfAccessoryNames.value = lodash.filter(selfAccessoryNames.value, (item: any) => lodash.size(item) > 0)
			formData.accountingProject = filterSubject[0].accountingProject
			formData.firstCode = filterSubject[0].firstCode
			formData.firstName = filterSubject[0].firstName
			formData.lastName = filterSubject[0].lastName
			if (formData.borrowing === null || formData.borrowing === undefined || lodash.size(formData.borrowing) === 0) {
				formData.borrowing = filterSubject[0].borrowing
			}
		} else {
			formData.firstCode = ''
			formData.firstName = ''
			formData.lastName = ''
			formData.borrowing = ''
			formData.accountingProject = ''
		}
		filterSubject = lodash.filter(subjectList.value, ['lastCode', formData.otherLastCode])
		if (filterSubject.length > 0) {
			// 过滤对方辅助项
			otherAccessoryNames.value = filterSubject[0].accessoryNames.split(',')
			otherAccessoryNames.value = lodash.filter(otherAccessoryNames.value, (item: any) => lodash.size(item) > 0)
			formData.otherFirstCode = filterSubject[0].firstCode
			formData.otherFirstName = filterSubject[0].firstName
			formData.otherLastName = filterSubject[0].lastName
			if (formData.otherBorrowing === null || formData.otherBorrowing === undefined || lodash.size(formData.otherBorrowing) === 0) {
				formData.otherBorrowing = filterSubject[0].borrowing
			}
		} else {
			formData.otherFirstCode = ''
			formData.otherFirstName = ''
			formData.otherLastName = ''
			formData.otherBorrowing = ''
			formData.otherAccountingProject = ''
		}

	}

  function changeLastCode(lastCode: any) {
    const filterSubject = lodash.filter(subjectList.value, ['lastCode', lastCode])
    if (activeTab.value === 'self') {
      if (filterSubject.length > 0) {
		    // 过滤发生方辅助项
				selfAccessoryNames.value = filterSubject[0].accessoryNames.split(',')
				selfAccessoryNames.value = lodash.filter(selfAccessoryNames.value, (item: any) => lodash.size(item) > 0)
				formData.accountingProject = filterSubject[0].accountingProject
        formData.firstCode = filterSubject[0].firstCode
        formData.firstName = filterSubject[0].firstName
        formData.lastName = filterSubject[0].lastName
				if (formData.borrowing === null || formData.borrowing === undefined || lodash.size(formData.borrowing) === 0) {
        	formData.borrowing = filterSubject[0].borrowing
				}
				formData.accessory = {}
				if (storeList.value.length > 0 && selfAccessoryNames.value.length > 0) {
					for (let store of storeList.value) {
						let item = {}
						for (let accessoryName of selfAccessoryNames.value) {
							item[accessoryName] = ''
						}
						formData.accessory[store.commercePlatformStoreName] = item
					}
				}
      } else {
        formData.firstCode = ''
        formData.firstName = ''
        formData.lastName = ''
        formData.borrowing = ''
        formData.accountingProject = ''
      }
    } else if(activeTab.value === 'other') {
      if (filterSubject.length > 0) {
				// 过滤对方辅助项
				otherAccessoryNames.value = filterSubject[0].accessoryNames.split(',')
				otherAccessoryNames.value = lodash.filter(otherAccessoryNames.value, (item: any) => lodash.size(item) > 0)
        formData.otherFirstCode = filterSubject[0].firstCode
        formData.otherFirstName = filterSubject[0].firstName
        formData.otherLastName = filterSubject[0].lastName
				if (formData.otherBorrowing === null || formData.otherBorrowing === undefined || lodash.size(formData.otherBorrowing) === 0) {
					formData.otherBorrowing = filterSubject[0].borrowing
				}
        formData.otherAccountingProject = filterSubject[0].accountingProject
				formData.otherAccessory = {}
				if (storeList.value.length > 0 && otherAccessoryNames.value.length > 0) {
					for (let store of storeList.value) {
						let item = {}
						for (let accessoryName of otherAccessoryNames.value) {
							item[accessoryName] = ''
						}
						formData.otherAccessory[store.commercePlatformStoreName] = item
					}
				}
      } else {
        formData.otherFirstCode = ''
        formData.otherFirstName = ''
        formData.otherLastName = ''
				formData.otherBorrowing = ''
        formData.otherAccountingProject = ''
      }
    }
  }

  const remoteMethod = (query: string) => {
	  getSubjectsListApi(query)
  }

  const otherRemoteMethod = (query: string) => {
	  getOtherSubjectsListApi(query)
  }

	function download() {
		exportAccountingProject('').then((response: any) => {
			const blob = new Blob([response.data], {
				type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8",
			});
			const a = document.createElement("a");
			const href = window.URL.createObjectURL(blob); // 下载的链接
			a.href = href;
			a.download = decodeURI(
				response.headers["content-disposition"].split(";")[1].split("=")[1]
			); // 获取后台设置的文件名称
			document.body.appendChild(a);
			a.click(); // 点击导出
			document.body.removeChild(a); // 下载完成移除元素
			window.URL.revokeObjectURL(href); // 释放掉blob对象
		});
	}

  /** 导出 */
  function handleExport() {
		const dictTypeIds = [ids.value].join(",");
    exportAccountingProject(dictTypeIds).then((response: any) => {
      const blob = new Blob([response.data], {
        type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8",
      });
      const a = document.createElement("a");
      const href = window.URL.createObjectURL(blob); // 下载的链接
      a.href = href;
      a.download = decodeURI(
              response.headers["content-disposition"].split(";")[1].split("=")[1]
      ); // 获取后台设置的文件名称
      document.body.appendChild(a);
      a.click(); // 点击导出
      document.body.removeChild(a); // 下载完成移除元素
      window.URL.revokeObjectURL(href); // 释放掉blob对象
    });
  }

  /** 打开导入弹窗 */
  async function openImportDialog() {
    importDialog.visible = true;
  }

  /**
   * Excel文件change事件
   *
   * @param file
   */
  function handleExcelChange(file: UploadFile) {
	  if (file.size !== undefined) {
		  if (file.size > 20*1024*1024) {
			  ElMessage.warning("上传文件大小已经超过20M，请尝试拆分成多个文件再上传");
			  return false
		  }
	  }
    if (!/\.(csv|xlsx|xls|XLSX|XLS|CSV)$/.test(file.name)) {
      ElMessage.warning("上传Excel只能为xlsx、xls、csv格式");
      excelFile.value = undefined;
      excelFilelist.value = [];
      return false;
    }
    excelFile.value = file.raw;
  }

  /** 导入 */
  function handleImport() {
    if (!excelFile.value) {
      ElMessage.warning("上传Excel文件不能为空");
      return false;
    }
    const importLoading = ElLoading.service({
      lock: true,
      text: '导入中...',
      background: 'rgba(0, 0, 0, 0.7)',
    })
    importAccountProject(excelFile.value).then((response) => {
      importLoading.close()
      closeImportDialog();
      if (response.data.length > 0) {
        importMsg.value = response.data
        resultDialog.visible = true
      }else{
        ElMessage.success('导入成功');
        resetQuery();
      }
    }).finally(() => importLoading.close());
  }

  /**  关闭导入弹窗 */
  function closeImportDialog() {
    importDialog.visible = false;
    excelFile.value = undefined;
    excelFilelist.value = [];
  }

  /**  关闭导入弹窗 */
  function closeImportResultDialog() {
    resultDialog.visible = false;
  }

	function changePlatform() {
		formData.accessory = {}
		formData.otherAccessory = {}
		getStoreListByStoreKey()
	}

  onMounted(() => {
		getAllPlatformList()
    handleQuery();
  });
</script>

<template>
  <div class="app-container">
    <div class="search-container">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
				<el-form-item label="平台" prop="billSystemPlatformCode">
					<el-select class="yz-el-select" v-model="queryParams.billSystemPlatformCode" clearable placeholder="请选择">
						<el-option
							v-for="item in platformList"
							:key="item.reconciliationSystemCode"
							:label="item.reconciliationSystemName"
							:value="item.reconciliationSystemCode"
						/>
					</el-select>
				</el-form-item>
        <el-form-item label="电商平台账单项目" prop="keywords">
          <el-input
									style="width: 200px"
                  v-model="queryParams.keywords"
                  clearable
									placeholder="请输入电商平台账单项目"
                  @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery()"
          ><i-ep-search />搜索</el-button
          >
          <el-button @click="resetQuery()"><i-ep-refresh />重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-card shadow="never">
      <template #header>
        <div class="flex justify-between">
          <div>
            <el-button
                    v-hasPerm="['sys:accountingProject:save']"
                    type="success"
                    @click="openDialog()"
            ><i-ep-plus />新增</el-button
            >
            <el-button
                    type="danger"
										v-hasPerm="['sys:accountingProject:delete']"
                    :disabled="ids.length === 0"
                    @click="handleDelete()"
            ><i-ep-delete />删除</el-button
            >
          </div>
          <div>
            <el-button class="ml-3" @click="openImportDialog"
            ><template #icon><i-ep-top/></template>导入</el-button
            >
						<el-button :disabled="ids.length === 0" class="ml-3" @click="handleExport"
						><template #icon><i-ep-download /></template>导出</el-button
						>
            <el-button class="ml-3" @click="download"
            ><template #icon><i-ep-download /></template>下载模板</el-button
            >
          </div>
        </div>

      </template>
      <el-table
              size="small"
              :header-row-style="{color: 'dimgray'}"
              v-loading="loading"
              highlight-current-row
              :data="projectList"
              border
							:height="projectList && projectList.length > 0 ? 570 : 130"
              @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column show-overflow-tooltip label="对账系统平台名称" prop="billSystemPlatformName" width="80"/>
        <el-table-column show-overflow-tooltip label="来源单据" prop="orderType" width="80"/>
        <el-table-column show-overflow-tooltip label="电商平台账单项目" prop="accountingProjectName" width="80"/>
        <el-table-column show-overflow-tooltip label="实际收支方向" prop="payType" width="80"/>
        <el-table-column show-overflow-tooltip label="一级科目编码" prop="firstCode" width="80"/>
        <el-table-column show-overflow-tooltip label="一级科目名称" prop="firstName" width="80"/>
        <el-table-column show-overflow-tooltip label="末级科目编码" prop="lastCode" width="80"/>
        <el-table-column show-overflow-tooltip label="末级科目名称" prop="lastName" width="80"/>
        <el-table-column show-overflow-tooltip label="记账项目" prop="accountingProject" width="80"/>
        <el-table-column show-overflow-tooltip label="对方一级科目编码" prop="otherFirstCode" width="80"/>
        <el-table-column show-overflow-tooltip label="对方一级科目名称" prop="otherFirstName" width="80"/>
        <el-table-column show-overflow-tooltip label="对方末级科目编码" prop="otherLastCode" width="80"/>
        <el-table-column show-overflow-tooltip label="对方末级科目名称" prop="otherLastName" width="80"/>
        <el-table-column show-overflow-tooltip label="记账项目" prop="otherAccountingProject" width="80"/>
        <el-table-column show-overflow-tooltip label="是否分摊" prop="apportionment" width="80"/>
        <el-table-column show-overflow-tooltip label="票前票后" prop="invoice" width="80"/>
        <el-table-column show-overflow-tooltip label="稽核标识" prop="audit" width="80"/>
        <el-table-column show-overflow-tooltip label="是否参与记账" prop="accounting" width="80"/>
        <el-table-column show-overflow-tooltip label="供应商名称" prop="carrier" width="80"/>
        <el-table-column show-overflow-tooltip label="借贷方向" prop="borrowing" width="80"/>
        <el-table-column show-overflow-tooltip label="税率" prop="rate" width="80"/>
        <el-table-column fixed="right" label="操作" align="center" width="130">
          <template #default="scope">
            <el-button
                    v-hasPerm="['sys:accountingProject:save']"
                    type="primary"
                    link
                    size="small"
                    @click.stop="openDialog(scope.row.id)"
            ><i-ep-edit />编辑</el-button
            >
            <el-button
                    v-hasPerm="['sys:accountingProject:delete']"
                    type="primary"
                    link
                    size="small"
                    @click.stop="handleDelete(scope.row.id)"
            ><i-ep-delete />删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <pagination
              v-if="total > 0"
              v-model:total="total"
              v-model:page="queryParams.pageNum"
              v-model:limit="queryParams.pageSize"
              @pagination="handleQuery"
      />
    </el-card>

    <el-dialog
            v-model="dialog.visible"
            :title="dialog.title"
            width="750px"
            :close-on-click-modal="false"
            @close="closeDialog"
    >
      <el-form
              ref="dataFormRef"
              :model="formData"
              :rules="rules"
              label-width="150px"
      >
        <el-row :gutter="20">
          <el-col :lg="12" :xs="20">
            <el-form-item label="业务平台" prop="billSystemPlatformCode">
              <el-select v-model="formData.billSystemPlatformCode" class="yz-el-select" placeholder="请选择" @change="changePlatform">
                <el-option
                        v-for="item in platformList"
                        :key="item.reconciliationSystemCode"
                        :label="item.reconciliationSystemName"
                        :value="item.reconciliationSystemCode"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :lg="12" :xs="20">
            <el-form-item label="来源单据" prop="orderType">
							<dictionary v-model="formData.orderType" type-code="sourceOrder" clearable/>
            </el-form-item>
          </el-col>
        </el-row>
				<el-row :gutter="20">
					<el-col :lg="12" :xs="20">
						<el-form-item label="电商平台账单项目" prop="accountingProjectName">
							<el-input v-model="formData.accountingProjectName" placeholder="请输入电商平台账单项目" clearable/>
						</el-form-item>
					</el-col>
					<el-col :lg="12" :xs="20">
						<el-form-item label="实际收支方向" prop="payType">
							<el-select v-model="formData.payType" class="yz-el-select" placeholder="请选择实际收支方向" filterable clearable>
								<el-option label="收入" value="收入" />
								<el-option label="支出" value="支出" />
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
        <el-tabs type="border-card" v-model="activeTab">
          <el-tab-pane label="发生方" name="self">
            <el-row :gutter="20">
              <el-col :lg="12" :xs="20">
                <el-form-item label="记账项目" prop="accountingProject">
                  <el-input v-model="formData.accountingProject" placeholder="请选择末级科目编码" readonly/>
                </el-form-item>
              </el-col>
              <el-col :lg="12" :xs="20">
                <el-form-item label="一级科目编码" prop="firstCode">
                  <el-input v-model="formData.firstCode" placeholder="请选择末级科目编码" readonly/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :lg="12" :xs="20">
                <el-form-item label="一级科目名称" prop="firstName">
                  <el-input v-model="formData.firstName" placeholder="请选择末级科目编码" readonly/>
                </el-form-item>
              </el-col>
              <el-col :lg="12" :xs="20">
                <el-form-item label="末级科目编码" prop="lastCode">
                  <el-select class="yz-el-select" v-model="formData.lastCode" placeholder="请输入末级科目编码" filterable @change="changeLastCode" remote :remote-method="remoteMethod">
                    <el-option
                            v-for="item in subjectList"
                            :key="item.lastCode"
                            :label="item.lastCode"
                            :value="item.lastCode"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :lg="12" :xs="20">
                <el-form-item label="末级科目名称" prop="lastName">
                  <el-input v-model="formData.lastName" placeholder="请选择末级科目编码" readonly/>
                </el-form-item>
              </el-col>
              <el-col :lg="12" :xs="20">
              </el-col>
            </el-row>
						<el-card>
							<template #header>
								<div class="card-header">
									<span>辅助项</span>
								</div>
							</template>
							<el-tabs v-if="storeList.length > 0" v-model="storeTab" type="border-card">
								<el-tab-pane v-for="storeObj in storeList" :key="storeObj" :name="storeObj.commercePlatformStoreName"  :label="storeObj.commercePlatformStoreName">
									<el-form-item v-for="accessory of selfAccessoryNames" :key="accessory" :label="accessory" label-width="70px">
										<el-input v-model="formData.accessory[storeObj.commercePlatformStoreName][accessory]" placeholder="请输入辅助项的对应值" style="width: 215px;"/>
									</el-form-item>
								</el-tab-pane>
							</el-tabs>
						</el-card>
            <el-row :gutter="20">
              <el-col :lg="12" :xs="20">
                <el-form-item label="是否分摊" prop="apportionment">
                  <el-radio-group v-model="formData.apportionment" class="ml-4">
                    <el-radio label="是" size="large">是</el-radio>
                    <el-radio label="否" size="large">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :lg="12" :xs="20">
                <el-form-item label="票前票后" prop="invoice">
                  <el-radio-group v-model="formData.invoice" class="ml-4">
                    <el-radio label="票前" size="large">票前</el-radio>
                    <el-radio label="票后" size="large">票后</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :lg="12" :xs="20">
                <el-form-item label="稽核标识" prop="audit">
                  <el-radio-group v-model="formData.audit" class="ml-4">
                    <el-radio label="参与" size="large">参与</el-radio>
                    <el-radio label="不参与" size="large">不参与</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :lg="12" :xs="20">
                <el-form-item label="是否参与记账" prop="accounting">
                  <el-radio-group v-model="formData.accounting" class="ml-4">
                    <el-radio label="参与" size="large">参与</el-radio>
                    <el-radio label="不参与" size="large">不参与</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :lg="12" :xs="20">
                <el-form-item label="供应商名称" prop="carrier">
                  <el-input v-model="formData.carrier" placeholder="请输入供应商名称"/>
                </el-form-item>
              </el-col>
              <el-col :lg="12" :xs="20">
                <el-form-item label="借贷方向" prop="borrowing">
                  <el-radio-group v-model="formData.borrowing" class="ml-4">
                    <el-radio label="借" size="large">借</el-radio>
                    <el-radio label="贷" size="large">贷</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="税率" prop="rate">
              <el-input v-model="formData.rate" placeholder="请输入税率" style="width:150px;">
                <template #append>%</template>
              </el-input>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="对方" name="other">
            <el-row :gutter="20">
              <el-col :lg="12" :xs="20">
                <el-form-item label="记账项目" prop="otherAccountingProject">
                  <el-input v-model="formData.otherAccountingProject" placeholder="请选择末级科目编码" readonly/>
                </el-form-item>
              </el-col>
              <el-col :lg="12" :xs="20">
                <el-form-item label="一级科目编码" prop="otherFirstCode">
                  <el-input v-model="formData.otherFirstCode" placeholder="请选择末级科目编码" readonly/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :lg="12" :xs="20">
                <el-form-item label="一级科目名称" prop="otherFirstName">
                  <el-input v-model="formData.otherFirstName" placeholder="请选择末级科目编码" readonly/>
                </el-form-item>
              </el-col>
              <el-col :lg="12" :xs="20">
                <el-form-item label="末级科目编码" prop="otherLastCode">
                  <el-select class="yz-el-select" v-model="formData.otherLastCode" placeholder="请选择" @change="changeLastCode" filterable remote :remote-method="otherRemoteMethod">
                    <el-option
                            v-for="item in otherSubjectList"
                            :key="item.lastCode"
                            :label="item.lastCode"
                            :value="item.lastCode"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :lg="12" :xs="20">
                <el-form-item label="末级科目名称" prop="otherLastName">
                  <el-input v-model="formData.otherLastName" placeholder="请选择末级科目编码" readonly/>
                </el-form-item>
              </el-col>
              <el-col :lg="12" :xs="20">
								<el-form-item label="借贷方向" prop="otherBorrowing">
									<el-radio-group v-model="formData.otherBorrowing" class="ml-4">
										<el-radio label="借" size="large">借</el-radio>
										<el-radio label="贷" size="large">贷</el-radio>
									</el-radio-group>
								</el-form-item>
              </el-col>
            </el-row>
						<el-card>
							<template #header>
								<div class="card-header">
									<span>辅助项</span>
								</div>
							</template>
							<el-tabs v-if="storeList.length > 0" v-model="storeTab" type="border-card">
								<el-tab-pane v-for="storeObj in storeList" :key="storeObj" :name="storeObj.commercePlatformStoreName"  :label="storeObj.commercePlatformStoreName">
									<el-form-item v-for="accessory of otherAccessoryNames" :key="accessory" :label="accessory" label-width="70px">
										<el-input v-model="formData.otherAccessory[storeObj.commercePlatformStoreName][accessory]" placeholder="请输入辅助项的对应值" style="width: 215px;"/>
									</el-form-item>
								</el-tab-pane>
							</el-tabs>
						</el-card>
          </el-tab-pane>
					<el-tab-pane label="资金项目类别" name="finance">
<!--						<el-form-item label="计算标记">-->
<!--							<el-radio-group v-model="formData.fundingDirection" class="ml-4">-->
<!--								<el-radio label="+" size="large">+</el-radio>-->
<!--								<el-radio label="-" size="large">-</el-radio>-->
<!--							</el-radio-group>-->
<!--						</el-form-item>-->
						<el-form-item v-if="formData.fundingProjects !== undefined" v-for="project in options" :key="project" :label="project.label">
							<el-input style="width: 200px" v-model="formData.fundingProjects[project.label]" clearable/>
						</el-form-item>
					</el-tab-pane>
        </el-tabs>

      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleSubmit">确 定</el-button>
          <el-button @click="closeDialog">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 导入弹窗 -->
    <el-dialog
            v-model="importDialog.visible"
            :title="importDialog.title"
            width="600px"
            append-to-body
            @close="closeImportDialog"
    >
      <el-form label-width="80px">

        <el-form-item label="Excel">
          <el-upload
                  class="upload-demo"
                  action=""
                  drag
                  :auto-upload="false"
                  accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
                  :file-list="excelFilelist"
                  :on-change="handleExcelChange"
                  :limit="1"
          >
            <el-icon class="el-icon--upload">
              <i-ep-upload-filled/>
            </el-icon>
            <div class="el-upload__text">
              将文件拖到此处，或
              <em>点击上传</em>
            </div>
            <template #tip>
              <div class="el-upload__tip">xls/xlsx files</div>
            </template>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleImport">确 定</el-button>
          <el-button @click="closeImportDialog">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <el-dialog
            v-model="resultDialog.visible"
            :title="resultDialog.title"
            width="600px"
            append-to-body
            :close-on-click-modal="false"
            @close="closeImportResultDialog"
    >
      <span v-for="msg in importMsg">{{msg}}<br></span>
    </el-dialog>
  </div>
</template>
